<template>
  <div style="width: 100%;height: 100%;padding-top: 12px;">
    <dv-decoration-7 style="width:180px;height:30px; width: 100%; font-size: 18px;">七天累计入库量</dv-decoration-7>
    <dv-active-ring-chart :config="config" style="width:100%;height:85%" />
  </div>
</template>
<script>
import {shouHuoTaskWeekApi} from '../../../api/product/index.js'
export default {
  props: {
    type: {
      type: String,
      default: 'week',
    },
  },
  data() {
    return {
      config: {
        radius: '80%',
        activeRadius: '90%',
        lineWidth: 30,
        data: [],
        digitalFlopStyle: {
          fontSize: 20
        },
        showOriginValue: true
      },
      list:[]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this
      shouHuoTaskWeekApi({pkCorp: 1002}).then(res => {

        const {code,data} = res,vals =[]
        if(code === 2000) {
          // _that.list = data
          // _that.type === 'week' ? _that.setWeekOption() : _that.setDayOption()
          data.forEach(item => {
            vals.push({
              name: `${item.day}`,
              value: item.leiJi
            })
          });
        }

        const _config = {..._that.config}
        _config['data'] = vals
        _that.config = _config
      })
    },
    // setWeekOption() {
    //   const _that = this
    //   const myChart = this.$echarts.init(this.$refs.reportRef),dateList = [],valueList = []
    //   _that.list.forEach(item => {
    //     dateList.push(item.day)
    //     valueList.push(item.value)
    //   })
    //   const option = {
    //     title: {
    //       text: '周产量波动',
    //       left:'50px',
    //       top: '10px',
    //       textStyle: {
    //         color: '#FFF'
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: dateList,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#05358b',
    //         },
    //       },
    //       axisLabel: {
    //         formatter: '{value}',
    //         color: '#eee',
    //         fontSize: this.fitChartSize(14),
    //       },
    //     },
    //     yAxis: {
    //       type: 'value',
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         formatter: '{value}',
    //         color: '#ccc',
    //         fontSize: this.fitChartSize(15),
    //       },
    //     },
    //     grid: {
    //       top: '15%',
    //       bottom: '10%',
    //       left: '10%',
    //       // right: '8%',
    //       // left: '10%',
    //     },
    //     series: [
    //       {
    //         data: valueList,
    //         type: 'line',
    //         label: {},
    //         areaStyle: {
    //           color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //             { offset: 0, color: '#7bfffc ' },
    //             { offset: 1, color: '#09f2ed' },
    //           ]),
    //         },
    //       },
    //     ],
    //   }
    //   myChart.setOption(option)
    // },
    // setDayOption() {
    //   const _that = this
    //   const myChart = this.$echarts.init(this.$refs.reportRef),hourList = [],valueList = []
    //   _that.list.forEach(item => {
    //     hourList.push(item.hour)
    //     valueList.push(item.value)
    //   })
    //   const option = {
    //     title: {
    //       text: '日产量波动',
    //       left:'50px',
    //       top: '10px',
    //       textStyle: {
    //         color: '#FFF'
    //       }
    //     },
    //     grid: {
    //       top: 20,
    //       left: '3%',
    //       right: '3%',
    //       bottom: '5px',
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: hourList,
    //       axisLabel: {
    //         color: '#aaa',
    //         fontSize: 10,
    //         // formatter: function(val) {
    //         //   var strs = val.split('') //字符串数组
    //         //   var str = ''
    //         //   for (var i = 0, s; (s = strs[i++]); ) {
    //         //     //遍历字符串数组
    //         //     str += s
    //         //     if (!(i % 4)) str += '\n' //按需要求余
    //         //   }
    //         //   return str
    //         // },

    //         interval: 0,
    //         rotate: 30,
    //       },

    //       axisLine: {
    //         lineStyle: {
    //           color: '#05358b',
    //         },
    //       },
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLabel: {
    //         formatter: '{value} ',
    //         color: '#aaa',
    //         fontSize: 10,
    //       },

    //       // 图表区域横向的线
    //       splitLine: {
    //         show: false,
    //         lineStyle: {
    //           color: '#05358b',
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         data: valueList,
    //         type: 'bar',
    //         label: {
    //           show: true,
    //           color: '#fff',
    //           fontSize: 12,
    //           position: 'top',
    //         },
    //         itemStyle: {
    //           color: '#FF4A01'
    //         },
    //       },
    //     ],
    //   }
    //   myChart.setOption(option)
    // }

  },
}

</script>
